<!--
 @description 经销商联系人信息
 @fileName Contacts.vue
 @author zengqiongying
 @created 2023/04/28 13:54:59
-->
<template>
  <div class="has-foot-pb">
    <Card v-for="(item, i) in list" :key="`${i}-${item.contactId}`">
      <template #title>
        <div class="card-header">
          <span class="name"><span class="icon"></span>联系人{{ i + 1 }}</span>
          <span class="btn-del" @click="onDelete(i)"></span>
        </div>
      </template>

      <ContactsItem v-model:modelValue="list[i]" :contactTypes="contactTypes" :emailRequired="true" />
    </Card>
    <Card>
      <div class="btn-add-larg" @click="onCreat">
        <qmp-icon name="plus" />
        添加新的联系人
      </div>
    </Card>
    <div :class="['ctm-content-foot', { relative: keyboard.show }]">
      <div class="btn radius-larg ctm-btn-main" @click="onSave(false)">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { toRefs, getCurrentInstance, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import ContactsItem from '../components/Contacts/Item.vue'
  import { ContactsMixin } from '../mixins/Contacts'
  import GetKeyboardMixin from '@/utils/useKeyboard'

  export default {
    name: 'DealerNewArchiveContacts',
    components: { Card, ContactsItem },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const $route = useRoute()

      const { datas, getList, onSave, onCreat, onDelete, initDictData } = ContactsMixin(1, ['email'], () => {
        proxy.$SimpleEvents.emit('refreshCustomerNewArchiveEditInfo', datas.id)
        nextTick(() => {
          $router.goBack()
        })
      })
      datas.id = $route.query?.id || ''
      datas.changeCode = $route.query?.changeCode || ''
      datas.keyboard = {
        show: false
      }
      datas.keyboard = GetKeyboardMixin()

      initDictData()
      getList()

      return {
        ...toRefs(datas),
        onSave,
        onCreat,
        onDelete
      }
    }
  }
</script>
<style lang="less" scoped>
  @import url('../styles/common.less');
</style>
